import React from 'react'
import { Row } from "components/lib"
import { useSetUrlSearchParam } from "utils/url"
import { useTasksSearchParams } from "./kanbanutils"
import { Button, Input } from 'antd'
import { UserSelect } from 'components/UserSelect'
import { TaskTypeSelect } from 'components/taskTpey-select'
import { tuple } from 'antd/es/_util/type'

export const SearchPanel = () => {
  const searchParams = useTasksSearchParams()
  const setSearchParams = useSetUrlSearchParam()
  // 重置
  const reset = () => {
    setSearchParams({
      typeId:undefined,
      processorId:undefined,
      tagId:undefined,
      name:undefined
    })
  }

  return (
    <Row  marginBottom={4} gap={true}>
      <Input 
        style={{width:"20rem"}} 
        placeholder='任务名' 
        value={searchParams.name}
        onChange={evt => setSearchParams({name:evt.target.value})}
      />
      <UserSelect
        defaultOptionName={"经办人"}
        value={searchParams.processorId}
        onChange={(value) => setSearchParams({processorId:value})}
      />
      <TaskTypeSelect 
        defaultOptionName='类型'
        value={searchParams.typeId}
        onChange={value => setSearchParams({typeId:value})}
      />
      <Button onClick={reset}>重置</Button>
    </Row>
  )
}